<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各种形状</title>
</head>
<link href="../../css/joint.css" rel="stylesheet"/>
<link href="../../css/paper.css" rel="stylesheet"/>
<body>

<!--画布-->
<div id="paper"></div>

<script src="../../js/jquery.js"></script>
<script src="../../js/lodash.js"></script>
<script src="../../js/backbone.js"></script>
<script src="../../js/joint.js"></script>

<script>
    //创建画笔
    let graph = new joint.dia.Graph;

    //创建画布
    let paper = new joint.dia.Paper({
        el:$("#paper"),
        width:500,
        height:600,
        gridSize:10,
        drawGrid:true,
        model:graph
    });

    //画矩形
    let Rectangle = new joint.shapes.standard.Rectangle();
    Rectangle.resize(50, 30);
    Rectangle.position(50,50)
    Rectangle.attr("label/text","矩形")
    Rectangle.addTo(graph)

    //画圆
    let circle = new joint.shapes.standard.Circle();
    circle.resize(100, 100);
    circle.position(250, 10);
    circle.attr('root/title', 'joint.shapes.standard.Circle');
    circle.attr('label/text', 'Circle');
    circle.attr('body/fill', 'lightblue');
    circle.addTo(graph);

    //多变形
    var polygon = new joint.shapes.standard.Polygon();
    polygon.resize(80, 50);
    polygon.position(50, 150);
    polygon.attr('root/title', '提示多边形');
    polygon.attr('label/text', '多变形');
    polygon.attr('body/refPoints', '0,10 10,0 20,10 10,20');
    polygon.addTo(graph);

</script>

</body>
</html>